<!-- components/custom-form/custom-form.vue -->
<template>
  <uni-forms label-width="0">
    <uni-forms-item>
      <uni-easyinput type="text" :clearable="false" placeholder="请输入手机号" />
    </uni-forms-item>
    <uni-forms-item>
      <uni-easyinput type="password" :clearable="false" placeholder="请输入密码" />
    </uni-forms-item>
    <uni-forms-item>
      <uni-easyinput type="textarea" :clearable="false" />
    </uni-forms-item>
  </uni-forms>
  <button type="primary">提交</button>
</template>

<script setup></script>

<script>
// 选项式
export default {
  options: {
    // 小程序端额外设置 小程序端 也可以修改样式了
    styleIsolation: 'shared'
  }
};
</script>

<style lang="scss">
// 自定义的组件，用的是 easyCom 的规则
// 指定帮我们添加样式的作用域 scoped
.uni-forms {
  margin: 20px;
}

// ::v-deep 适用在 h5
// 小程序端 无法生效
::v-deep.uni-easyinput__content-input {
  border: 1px solid red;
  padding: 10px;
}
</style>
